@import './var.css';

// 主要按钮
.btnConfirm {
	width: 500rpx;
	height: 88rpx;
	line-height: 88rpx;
	background: #d93954;
	text-align: center;
	font-weight: 400;
	font-size: 28rpx;
	color: #ffffff;
	margin: 0rpx auto;
}

// 筛选
.selects {
	z-index: 99;
	$mTB: 9rpx;
	width: 690rpx + 9rpx;
	margin: 0rpx auto 18rpx;
	background: #fff;

	view {
		margin-left: $mTB;
		margin-bottom: $mTB;
		width: 218rpx;
		height: 68rpx;
		line-height: 68rpx;
		border: 1rpx solid #e6e6e6;
		font-weight: 400;
		font-size: 28rpx;
		color: #777777;
		text-align: center;
		transition: all 0.2s;
	}

	.active {
		background: #464646;
		color: #ffffff;
	}
}

// 筛选内容
.selectCont {
	width: 690rpx;
	margin: 0rpx auto 50rpx;

	&-main {
		width: 100%;
		&-ds {
			font-weight: 300;
			font-size: 24rpx;
			color: #666666;
			line-height: 28rpx;

			margin-top: 10rpx;
		}

		&-title {
			margin-top: 35rpx;

			font-weight: 500;
			font-size: 30rpx;
			color: #2d2d2d;
			line-height: 35rpx;
		}

		&-head {
			view:first-child {
				font-weight: bold;
				font-size: 36rpx;
				color: #7d7d7d;
				line-height: 42rpx;
			}

			view:last-child {
				width: 144rpx;
				height: 56rpx;
				background: #ffffff;
				border: 2rpx solid var(--mainColor);

				font-weight: bold;
				font-size: 26rpx;
				color: var(--mainColor);
				line-height: 56rpx;
				text-align: center;
			}
		}
	}

	&-image {
		width: 220rpx;
		height: 220rpx;
		margin-right: 20rpx;

		view {
			min-width: 120rpx;
			padding: 0rpx 10rpx;
			height: 42rpx;
			line-height: 42rpx;
			background: #464646;

			font-weight: 400;
			font-size: 24rpx;
			color: #ffffff;
			position: absolute;
			text-align: center;
			z-index: 2;
			left: 0rpx;
			bottom: 0rpx;
		}
	}
}

.dotData {
	width: 100%;
	height: 200rpx;
	line-height: 200rpx;
	text-align: center;
	color: #c0c4cc;
	font-size: 14px;
}

.bannerTitles {
	width: 750rpx;
	height: 400rpx;
	&-more {
		position: absolute;
		left: 30rpx;
		bottom: 84rpx;
		width: 172rpx;
		height: 57rpx;
		line-height: 57rpx;
		background: #2d2d2d;
		text-align: center;
		font-weight: 500;
		font-size: 25rpx;
		color: #ffffff;
		image {
			width: 30rpx;
			height: 30rpx;
			margin-left: 10rpx;
		}
	}
	&-ds {
		top: 150rpx;
		left: 46rpx;
		width: fit-content;
		max-width: calc(750rpx - (46rpx * 2));
		box-sizing: border-box;
		// height: 54rpx;
		// line-height: 54rpx;
		background: #2d2d2d;
		padding: 10rpx 17rpx;

		font-weight: 400;
		font-size: 24rpx;
		color: #ffffff;
	}

	&-title {
		left: 30rpx;
		top: 99rpx;
		width: fit-content;
		max-width: calc(750rpx - (30rpx * 2));
		box-sizing: border-box;
		// height: 53rpx;
		// line-height: 53rpx;
		background: #e0301e;
		padding: 2px 20rpx;

		font-weight: 500;
		font-size: 34rpx;
		color: #ffffff;
		text-align: center;
	}
}
